import React,{Component} from 'react';
import {connect} from "react-redux";
import { bindActionCreators} from "redux";
import * as actionsCreators from "./action";

class Step1 extends Component{
  constructor(props){
    super(props);
     this.handleChange1 = this.handleChange1.bind(this);
     this.handleChange2 = this.handleChange2.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.state={
       username:'',
       phone:'',
       rightOne:0,
       rightTwo:0,
       rightThree:0,
       rightFour1:0,
       rightFour2:0,
       rightFour3:0,
       rightFour4:0,
       rightFive:0
     }
  }

  handleChange1(event) {
   this.setState({username: event.target.value});
 }
 handleChange2(event) {
  this.setState({phone: event.target.value});
}
componentDidMount(){
  let _this=this;
  setTimeout(function(){
    _this.setState({rightOne: 1});
  },100);
  setTimeout(function(){
    _this.setState({rightTwo: 1});
  },200);
  setTimeout(function(){
    _this.setState({rightThree: 1});
  },220);
  setTimeout(function(){
    _this.setState({rightFour1: 1});
  },230);
  setTimeout(function(){
    _this.setState({rightFour2: 1});
  },240);
  setTimeout(function(){
    _this.setState({rightFour3: 1});
  },250);
  setTimeout(function(){
    _this.setState({rightFour4: 1});
  },260);
  setTimeout(function(){
    _this.setState({rightFive: 1});
  },100);
}
handleSubmit(event) {
    event.preventDefault();
    let that=this;
    let data={
      username:that.state.username,
      phone:that.state.phone
    }
    this.props.step(2,data);
  }
    render(){
      let complete=this.state.username && this.state.phone;
        return (
            <div className="welcome-container">
                    <span>
                      <div className={`welcome-main-container ${this.state.rightFive?' __animated':''}`}>
                        <div className={`welcome-headings ${this.state.rightOne?' __animated':''}`}>
                          <h1 className="welcome-heading">欢迎来到多软！</h1>
                          <h2 className="welcome-subheading">您现在是我们的免费体验账户</h2>
                        </div>
                        <div className={`welcome-content  ${this.state.rightTwo?' __animated':''} __basic-plan`}>
                          <div className="welcome-content-box">
                            <div className="welcome-content-box-top-content">
                              <h3 className="welcome-content-box-heading">基本</h3>
                              <img className={`welcome-content-box-avatar${this.state.rightThree?' __animated':''}`} src={require('./static/img/avatar.svg')} />
                            </div>
                            <ul className="welcome-content-box-features">
                              <li className="icon-public welcome-content-box-feature-item">公共内容<i className={`icon-check ${this.state.rightFour1?'__animated':''}`} /></li>
                              <li className="icon-infographic welcome-content-box-feature-item">免费编辑<i className={`icon-check ${this.state.rightFour2?'__animated':''}`} /></li>
                              <li className="icon-map-chart welcome-content-box-feature-item">查看模板<i className={`icon-check ${this.state.rightFour3?'__animated':''}`} /></li>
                              <li className="icon-insertpicture welcome-content-box-feature-item">对象动画<i className={`icon-check ${this.state.rightFour4?'__animated':''}`} /></li>
                            </ul>
                          </div>
                          <div className={`icon-check welcome-check-icon${complete?' __animated':''}`} />

                        </div>
                      </div>
                    </span>
                    <span>
                      <div className={`welcome-form ${this.state.rightFive?' __animated':''}`}>
                        <span>
                          <div className="welcome-form-inner">
                            <div className="welcome-form-progress">Step 1 of 4</div>
                            <h1 className="welcome-form-heading">让我们为您推荐您所需要的产品</h1>
                            <div className="welcome-form-content">
                              <form onSubmit={this.handleSubmit}>
                                <div className="text-input __light">
                                  <label className="text-input-label">姓名:</label>
                                    <input type="text" className="text-input-field" onChange={this.handleChange1}/>
                                </div>
                                <div className="text-input __light">
                                  <label className="text-input-label">电话:</label>
                                  <input type="text" className="text-input-field" defaultValue=""  onChange={this.handleChange2}/>
                                </div>
                                <button className={`button __blue welcome-submit-button ${complete?'':'__disabled'}`}  disabled={`${complete?'':'disabled'}`} type="submit">下一步</button>
                                <div className={`welcome-can-submit-notification${complete?' __animated':''}`}>欢迎光临!</div>
                              </form>
                            </div>
                          </div>
                        </span>
                      </div>
                    </span>
                    <span />
                  </div>
        )
    }
}
export default connect(state=>state,dispatch=>bindActionCreators(actionsCreators,dispatch))(Step1);
